<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .active {
            color: darkcyan;
        }
        .line {
            margin-left: 40px;
        }
    </style>
</head>
<body>

<div id="app">
    <h2 class="active">{{message}}</h2>
    <h2 v-bind:class="act">{{message}}</h2>
    <hr>

    <!-- 此处{}表示对象 -->
    <h2 v-bind:class="{active: isActive, line: isLine}">{{message}}</h2>
    <h2 v-bind:class="acquairClass()">{{message}}</h2><!-- 此处方法名()没有被vue省略,要加() -->

    <button style="color: blueviolet" v-on:click="changeColor">变色按钮</button>
    <button style="color: blueviolet" v-on:click="changeMargin">距离按钮</button>

</div>


<script src="../../js/vue.js"></script>

<script>
    const vue = new Vue({
        el: "#app",
        data: {
            message: "Hello vue,你好！",
            act: "active",
            isActive: true,
            isLine: false
        },
        methods:{
            changeColor: function(){
                this.isActive = !this.isActive;
            },
            changeMargin: function(){
                this.isLine = !this.isLine;
            },
            acquairClass: function(){
                return {active: this.isActive, line: this.isLine};
            }
        }
    });
</script>

</body>
</html>